<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>创建线下实践</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .container { padding: 20px; max-width: 800px; margin: auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .btn { padding: 10px 15px; border: none; border-radius: 4px; color: white; cursor: pointer; }
        .btn-primary { background-color: #007bff; }
        .message { padding: 10px; margin-bottom: 15px; border-radius: 5px; }
        .error { background-color: #f8d7da; color: #721c24; }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="container">
    <h2>创建新的线下实践</h2>

    <div th:if="${errorMessage}" class="message error" th:text="${errorMessage}"></div>

    <form th:action="@{/practice/add}" th:object="${practice}" method="post">
        <div class="form-group">
            <label for="title">实践标题</label>
            <input type="text" id="title" th:field="*{title}" required>
        </div>
        <div class="form-group">
            <label for="courseId">所属课程</label>
            <select id="courseId" th:field="*{courseId}" required>
                <option value="">-- 请选择课程 --</option>
                <option th:each="course : ${teacherCourses}"
                        th:value="${course.id}"
                        th:text="${course.couName}"></option>
            </select>
        </div>
        <div class="form-group">
            <label for="practiceTime">实践时间</label>
            <input type="datetime-local" id="practiceTime" th:field="*{practiceTime}" required>
        </div>

        <div class="form-group">
            <label for="location">实践地点</label>
            <input type="text" id="location" th:field="*{location}" placeholder="例如：公司总部A栋301会议室" required>
        </div>
        <div class="form-group">
            <label for="content">实践任务内容</label>
            <textarea id="content" th:field="*{content}" rows="8" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">创建实践</button>
        <a th:href="@{/practice/manage}" style="margin-left: 10px;">返回</a>
    </form>
</div>
</body>
</html>